<html lang="zh-CN"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>草草的个人生活记录平台</title>
  <!-- Tailwind CSS v3 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <!-- 统一的 Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#7FB5FF',
            secondary: '#FF9EAA',
            tertiary: '#97DFFC',
            accent: '#FFD1DA',
            light: '#F9F7F7',
            dark: '#4A4A4A'
          },
          fontFamily: {
            sans: ['Comic Sans MS', 'Arial', 'sans-serif'],
          },
          animation: {
            'bounce-slow': 'bounce 3s infinite',
            'wiggle': 'wiggle 1s ease-in-out infinite',
            'float': 'float 3s ease-in-out infinite',
          },
          keyframes: {
            wiggle: {
              '0%, 100%': { transform: 'rotate(-3deg)' },
              '50%': { transform: 'rotate(3deg)' },
            },
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-10px)' },
            }
          }
        }
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .hand-drawn-border {
        border: 2px solid #000;
        border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
        box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
      }
      .hand-drawn-btn {
        border: 2px solid #000;
        border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
        box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
        transition: all 0.2s ease;
      }
      .hand-drawn-btn:hover {
        transform: translate(-2px, -2px);
        box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
      }
      .hand-drawn-btn:active {
        transform: translate(1px, 1px);
        box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
      }
      .hand-drawn-card {
        border: 2px solid #000;
        border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
        box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
        background-color: white;
      }
      .doodle-bg {
        background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%237FB5FF' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
      }
      .doodle-line {
        position: relative;
      }
      .doodle-line::after {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, transparent, #7FB5FF, transparent);
        transform: rotate(-1deg);
      }
      .custom-scrollbar::-webkit-scrollbar {
        width: 8px;
      }
      .custom-scrollbar::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
      }
      .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #7FB5FF;
        border-radius: 10px;
        border: 2px solid #f1f1f1;
      }
      .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #6ba5ff;
      }
    }
  </style>
</head>
<body class="bg-green-50 doodle-bg min-h-screen font-sans text-dark">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-md sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/20380001045045eca97bacbea6f560fd~tplv-a9rns2rl98-image.image?rcl=202511071821541066F53373D999D8C3AE&amp;rk3s=8e244e95&amp;rrcfp=f06b921b&amp;x-expires=1765102939&amp;x-signature=sZKNhozmKwCjMdHccOkFxLWgNOA%3D" alt="Logo" class="w-10 h-10">
        <h1 class="text-2xl font-bold text-primary"> record daily life</h1>
      </div>
      <div class="flex items-center space-x-4">
        <div class="relative">
          <span id="current-date" class="text-sm font-medium"></span>
        </div>
        <button id="theme-toggle" class="hand-drawn-btn p-2 bg-tertiary">
          <i class="fa fa-moon-o" aria-hidden="true"></i>
        </button>
      </div>
    </div>
  </header>

  <!-- 主要内容区 -->
  <main class="container mx-auto px-4 py-8">
    <!-- 欢迎区域 -->
    <section class="mb-10 text-center">
      <h2 class="text-3xl font-bold mb-2 doodle-line inline-block" style="font-size: 36px;">草草🌿 又度过了美好的一天啊！</h2>
      <p class="text-gray-600">给自己一个大大的微笑✨</p>
    </section>

    <!-- 打卡统计概览 -->
    <section class="mb-10">
      <div class="hand-drawn-card p-6 bg-white">
        <h3 class="text-xl font-bold mb-4 flex items-center">
          <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/20380001045045eca97bacbea6f560fd~tplv-a9rns2rl98-image.image?rcl=202511071821541066F53373D999D8C3AE&amp;rk3s=8e244e95&amp;rrcfp=f06b921b&amp;x-expires=1765102939&amp;x-signature=sZKNhozmKwCjMdHccOkFxLWgNOA%3D" alt="Calendar" class="w-6 h-6 mr-2">
          本周打卡统计
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <canvas id="weekly-chart" height="200"></canvas>
          </div>
          <div class="grid grid-cols-2 gap-4">
            <div class="hand-drawn-card p-4 bg-primary bg-opacity-10">
              <h4 class="font-bold text-primary">运动打卡</h4>
              <p class="text-3xl font-bold mt-2" id="exercise-count">3/7</p>
              <p class="text-sm text-gray-500">天/周</p>
            </div>
            <div class="hand-drawn-card p-4 bg-secondary bg-opacity-10">
              <h4 class="font-bold text-secondary">学习打卡</h4>
              <p class="text-3xl font-bold mt-2" id="study-count">5/7</p>
              <p class="text-sm text-gray-500">天/周</p>
            </div>
            <div class="hand-drawn-card p-4 bg-tertiary bg-opacity-10">
              <h4 class="font-bold text-tertiary">饮食记录</h4>
              <p class="text-3xl font-bold mt-2" id="food-count">4/7</p>
              <p class="text-sm text-gray-500">天/周</p>
            </div>
            <div class="hand-drawn-card p-4 bg-accent bg-opacity-10">
              <h4 class="font-bold text-accent">趣事分享</h4>
              <p class="text-3xl font-bold mt-2" id="fun-count">2/7</p>
              <p class="text-sm text-gray-500">天/周</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 打卡区域 -->
    <section class="mb-10">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- 运动打卡 -->
        <div class="hand-drawn-card p-6 bg-white">
          <h3 class="text-xl font-bold mb-4 flex items-center">
            <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/a7fbf026a1cf44478d1a855598bc067f~tplv-a9rns2rl98-image.image?rcl=202511071821541066F53373D999D8C3AE&amp;rk3s=8e244e95&amp;rrcfp=f06b921b&amp;x-expires=1765102939&amp;x-signature=edUh77H0sZ%2FL9Fh2aS2y89eOfdE%3D" alt="Exercise" class="w-6 h-6 mr-2">
            运动打卡
          </h3>
          <div class="space-y-4">
            <div class="exercise-type">
              <label class="flex items-center space-x-2 cursor-pointer">
                <input type="checkbox" class="form-checkbox h-5 w-5 text-primary rounded hand-drawn-border">
                <span>团操</span>
              </label>
              <div class="ml-7 mt-2">
                <div class="flex items-center space-x-2">
                  <label class="text-sm">时长:</label>
                  <input type="number" class="hand-drawn-border px-3 py-1 w-20" placeholder="分钟">
                </div>
                <div class="flex items-center space-x-2 mt-2">
                  <label class="text-sm">感受:</label>
                  <select class="hand-drawn-border px-3 py-1">
                    <option>轻松</option>
                    <option>适中</option>
                    <option>困难</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="exercise-type">
              <label class="flex items-center space-x-2 cursor-pointer">
                <input type="checkbox" class="form-checkbox h-5 w-5 text-primary rounded hand-drawn-border">
                <span>爬坡</span>
              </label>
              <div class="ml-7 mt-2">
                <div class="flex items-center space-x-2">
                  <label class="text-sm">时长:</label>
                  <input type="number" class="hand-drawn-border px-3 py-1 w-20" placeholder="分钟">
                </div>
                <div class="flex items-center space-x-2 mt-2">
                  <label class="text-sm">坡度:</label>
                  <input type="number" class="hand-drawn-border px-3 py-1 w-20" placeholder="°">
                </div>
                <div class="flex items-center space-x-2 mt-2">
                  <label class="text-sm">感受:</label>
                  <select class="hand-drawn-border px-3 py-1">
                    <option>轻松</option>
                    <option>适中</option>
                    <option>困难</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="exercise-type">
              <label class="flex items-center space-x-2 cursor-pointer">
                <input type="checkbox" class="form-checkbox h-5 w-5 text-primary rounded hand-drawn-border">
                <span>其他</span>
              </label>
              <div class="ml-7 mt-2">
                <div class="flex items-center space-x-2">
                  <label class="text-sm">运动类型:</label>
                  <input type="text" class="hand-drawn-border px-3 py-1 w-32" placeholder="请输入运动类型">
                </div>
                <div class="flex items-center space-x-2 mt-2">
                  <label class="text-sm">时长:</label>
                  <input type="number" class="hand-drawn-border px-3 py-1 w-20" placeholder="分钟">
                </div>
                <div class="flex items-center space-x-2 mt-2">
                  <label class="text-sm">感受:</label>
                  <select class="hand-drawn-border px-3 py-1">
                    <option>轻松</option>
                    <option>适中</option>
                    <option>困难</option>
                  </select>
                </div>
              </div>
            </div>
            <button class="hand-drawn-btn bg-primary text-white px-4 py-2 mt-4 w-full">
              完成打卡
            </button>
          </div>
        </div>

        <!-- 学习打卡 -->
        <div class="hand-drawn-card p-6 bg-white">
          <h3 class="text-xl font-bold mb-4 flex items-center">
            <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/09b1f35ed1ef4acf99d472d1f2bbe5b6~tplv-a9rns2rl98-image.image?rcl=202511071821541066F53373D999D8C3AE&amp;rk3s=8e244e95&amp;rrcfp=f06b921b&amp;x-expires=1765102949&amp;x-signature=WI1b6aG2i%2FGU8X%2BgfWHW82eciUA%3D" alt="Study" class="w-6 h-6 mr-2">
            学习打卡
          </h3>
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium mb-1">学习内容</label>
              <select class="hand-drawn-border w-full px-3 py-2">
                <option>外语</option>
                <option>阅读</option>
                <option>AI</option>
                <option>其他</option>
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium mb-1">学习时长 (分钟)</label>
              <input type="number" class="hand-drawn-border w-full px-3 py-2" placeholder="请输入学习时长">
            </div>
            <div>
              <label class="block text-sm font-medium mb-1">学习笔记</label>
              <textarea class="hand-drawn-border w-full px-3 py-2 h-24" placeholder="记录今天的学习收获..."></textarea>
            </div>
            <button class="hand-drawn-btn bg-secondary text-white px-4 py-2 mt-4 w-full">
              完成打卡
            </button>
          </div>
        </div>

        <!-- 饮食记录 -->
        <div class="hand-drawn-card p-6 bg-white">
          <h3 class="text-xl font-bold mb-4 flex items-center">
            <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/161f5c3fa9f046c09ac2940e1d7cdced~tplv-a9rns2rl98-image.image?rcl=202511071821541066F53373D999D8C3AE&amp;rk3s=8e244e95&amp;rrcfp=f06b921b&amp;x-expires=1765102938&amp;x-signature=w5UhYlzoNnYk3iGYV7l5jhQmwyA%3D" alt="Food" class="w-6 h-6 mr-2">
            饮食记录
          </h3>
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium mb-1">餐次</label>
              <div class="flex space-x-4">
                <label class="flex items-center space-x-2 cursor-pointer">
                  <input type="radio" name="meal" class="form-radio h-5 w-5 text-tertiary">
                  <span>早餐</span>
                </label>
                <label class="flex items-center space-x-2 cursor-pointer">
                  <input type="radio" name="meal" class="form-radio h-5 w-5 text-tertiary">
                  <span>午餐</span>
                </label>
                <label class="flex items-center space-x-2 cursor-pointer">
                  <input type="radio" name="meal" class="form-radio h-5 w-5 text-tertiary">
                  <span>晚餐</span>
                </label>
                <label class="flex items-center space-x-2 cursor-pointer">
                  <input type="radio" name="meal" class="form-radio h-5 w-5 text-tertiary">
                  <span>加餐</span>
                </label>
              </div>
            </div>
            <div>
              <label class="block text-sm font-medium mb-1">食物名称</label>
              <input type="text" class="hand-drawn-border w-full px-3 py-2" placeholder="请输入食物名称">
            </div>
            <div>
              <label class="block text-sm font-medium mb-1">上传图片</label>
              <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center cursor-pointer hover:border-tertiary transition-colors">
                <i class="fa fa-camera text-2xl text-gray-400"></i>
                <p class="text-sm text-gray-500 mt-1">点击上传图片</p>
                <input type="file" class="hidden" accept="image/*">
              </div>
            </div>
            <div>
              <label class="block text-sm font-medium mb-1">备注</label>
              <textarea class="hand-drawn-border w-full px-3 py-2 h-16" placeholder="记录食物的味道或感受..."></textarea>
            </div>
            <button class="hand-drawn-btn bg-tertiary text-white px-4 py-2 mt-4 w-full">
              保存记录
            </button>
          </div>
        </div>

        <!-- 趣事分享 -->
        <div class="hand-drawn-card p-6 bg-white">
          <h3 class="text-xl font-bold mb-4 flex items-center">
            <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/cb1cc55f56bf48df9811e2fe53a0ac7d~tplv-a9rns2rl98-image.image?rcl=202511071821541066F53373D999D8C3AE&amp;rk3s=8e244e95&amp;rrcfp=f06b921b&amp;x-expires=1765102939&amp;x-signature=tCJbUzGxbpuvWl9ICUZgnGB7IWY%3D" alt="Fun" class="w-6 h-6 mr-2">
            今日趣事
          </h3>
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium mb-1">分享内容</label>
              <textarea class="hand-drawn-border w-full px-3 py-2 h-32" placeholder="今天发生了什么有趣的事情..."></textarea>
            </div>
            <div>
              <label class="block text-sm font-medium mb-1">上传图片 (可选)</label>
              <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center cursor-pointer hover:border-accent transition-colors">
                <i class="fa fa-camera text-2xl text-gray-400"></i>
                <p class="text-sm text-gray-500 mt-1">点击上传图片</p>
                <input type="file" class="hidden" accept="image/*">
              </div>
            </div>
            <button class="hand-drawn-btn bg-accent text-white px-4 py-2 mt-4 w-full">
              分享趣事
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- 历史记录区域 -->
    <section class="mb-10">
      <div class="hand-drawn-card p-6 bg-white">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-bold flex items-center">
            <i class="fa fa-history text-primary mr-2"></i>
            历史记录
          </h3>
          <div class="flex space-x-2">
            <select class="hand-drawn-border px-3 py-1 text-sm">
              <option>全部类型</option>
              <option>运动</option>
              <option>学习</option>
              <option>饮食</option>
              <option>趣事</option>
            </select>
            <input type="date" class="hand-drawn-border px-3 py-1 text-sm">
          </div>
        </div>
        <div class="overflow-x-auto custom-scrollbar">
          <table class="min-w-full">
            <thead>
              <tr class="border-b-2 border-gray-200">
                <th class="py-2 px-4 text-left">日期</th>
                <th class="py-2 px-4 text-left">类型</th>
                <th class="py-2 px-4 text-left">内容</th>
                <th class="py-2 px-4 text-left">操作</th>
              </tr>
            </thead>
            <tbody id="history-table">
              <!-- 历史记录将通过JavaScript动态生成 -->
            </tbody>
          </table>
        </div>
      </div>
    </section>
  </main>

  <!-- 底部区域 -->
  <footer class="bg-white shadow-inner py-6">
    <div class="container mx-auto px-4 text-center">
      <p class="text-gray-600">© 2025 草草的个人生活记录平台 | kekeaiai</p>
      <div class="flex justify-center space-x-4 mt-4">
        <button class="text-gray-500 hover:text-primary">
          <i class="fa fa-question-circle"></i> 帮助
        </button>
        <button class="text-gray-500 hover:text-primary">
          <i class="fa fa-cog"></i> 设置
        </button>
        <button class="text-gray-500 hover:text-primary">
          <i class="fa fa-heart"></i> 关于
        </button>
      </div>
    </div>
  </footer>

  <!-- 打卡成功弹窗 -->
  <div id="success-modal" class="fixed inset-0 flex items-center justify-center z-50 hidden">
    <div class="absolute inset-0 bg-black bg-opacity-50"></div>
    <div class="hand-drawn-card p-8 bg-white max-w-md w-full relative z-10 animate-float">
      <div class="text-center">
        <div class="inline-block p-4 rounded-full bg-green-100 text-green-500 mb-4">
          <i class="fa fa-check-circle text-4xl"></i>
        </div>
        <h3 class="text-2xl font-bold mb-2">打卡成功！</h3>
        <p class="text-gray-600 mb-6">太棒了！你已成功记录今天的生活。</p>
        <button id="close-modal" class="hand-drawn-btn bg-primary text-white px-6 py-2">
          继续记录
        </button>
      </div>
    </div>
  </div>

  <script>
    // 当前日期显示
    document.addEventListener('DOMContentLoaded', function() {
      const currentDateEl = document.getElementById('current-date');
      const now = new Date();
      const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
      currentDateEl.textContent = now.toLocaleDateString('zh-CN', options);

      // 初始化图表
      initWeeklyChart();
      
      // 加载历史记录
      loadHistoryRecords();
      
      // 绑定打卡按钮事件
      bindCheckInButtons();
      
      // 绑定弹窗关闭按钮
      document.getElementById('close-modal').addEventListener('click', function() {
        document.getElementById('success-modal').classList.add('hidden');
      });
      
      // 绑定主题切换按钮
      document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
      
      // 绑定文件上传区域点击事件
      const fileUploadAreas = document.querySelectorAll('.border-dashed');
      fileUploadAreas.forEach(area => {
        area.addEventListener('click', function() {
          const fileInput = this.querySelector('input[type="file"]');
          fileInput.click();
        });
      });
      
      // 绑定文件选择事件
      const fileInputs = document.querySelectorAll('input[type="file"]');
      fileInputs.forEach(input => {
        input.addEventListener('change', handleFileSelect);
      });
    });

    // 初始化周打卡统计图表
    function initWeeklyChart() {
      const ctx = document.getElementById('weekly-chart').getContext('2d');
      
      // 模拟数据
      const weeklyData = {
        labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        datasets: [
          {
            label: '运动',
            data: [1, 0, 1, 0, 1, 0, 0],
            backgroundColor: '#7FB5FF',
            borderColor: '#7FB5FF',
            borderWidth: 1
          },
          {
            label: '学习',
            data: [1, 1, 0, 1, 1, 1, 0],
            backgroundColor: '#FF9EAA',
            borderColor: '#FF9EAA',
            borderWidth: 1
          },
          {
            label: '饮食',
            data: [1, 1, 0, 0, 1, 1, 0],
            backgroundColor: '#97DFFC',
            borderColor: '#97DFFC',
            borderWidth: 1
          },
          {
            label: '趣事',
            data: [0, 0, 1, 0, 0, 1, 0],
            backgroundColor: '#FFD1DA',
            borderColor: '#FFD1DA',
            borderWidth: 1
          }
        ]
      };
      
      const chart = new Chart(ctx, {
        type: 'bar',
        data: weeklyData,
        options: {
          responsive: true,
          scales: {
            x: {
              stacked: true,
              grid: {
                display: false
              }
            },
            y: {
              stacked: true,
              beginAtZero: true,
              max: 1,
              ticks: {
                stepSize: 1
              }
            }
          },
          plugins: {
            legend: {
              position: 'bottom'
            },
            tooltip: {
              callbacks: {
                label: function(context) {
                  const label = context.dataset.label || '';
                  return label + (context.raw ? ': 已打卡' : ': 未打卡');
                }
              }
            }
          }
        }
      });
    }

    // 加载历史记录
    function loadHistoryRecords() {
      // 模拟历史记录数据
      const historyRecords = [
        {
          date: '2025-07-28',
          type: '运动',
          content: '团操 45分钟，感觉适中',
          icon: 'fa-heartbeat text-primary'
        },
        {
          date: '2025-07-28',
          type: '学习',
          content: '编程学习 60分钟，学习了JavaScript',
          icon: 'fa-book text-secondary'
        },
        {
          date: '2025-07-27',
          type: '饮食',
          content: '午餐：沙拉和三明治',
          icon: 'fa-cutlery text-tertiary'
        },
        {
          date: '2025-07-27',
          type: '趣事',
          content: '今天看到一只超可爱的猫咪！',
          icon: 'fa-smile-o text-accent'
        },
        {
          date: '2025-07-26',
          type: '运动',
          content: '爬坡 30分钟，坡度15°',
          icon: 'fa-heartbeat text-primary'
        }
      ];
      
      const tableBody = document.getElementById('history-table');
      tableBody.innerHTML = '';
      
      historyRecords.forEach(record => {
        const row = document.createElement('tr');
        row.className = 'border-b border-gray-100 hover:bg-gray-50';
        
        row.innerHTML = `
          <td class="py-3 px-4">${record.date}</td>
          <td class="py-3 px-4">
            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100">
              <i class="fa ${record.icon} mr-1"></i> ${record.type}
            </span>
          </td>
          <td class="py-3 px-4">${record.content}</td>
          <td class="py-3 px-4">
            <button class="text-primary hover:text-primary-dark mr-2">
              <i class="fa fa-eye"></i>
            </button>
            <button class="text-gray-500 hover:text-gray-700 mr-2">
              <i class="fa fa-pencil"></i>
            </button>
            <button class="text-red-500 hover:text-red-700">
              <i class="fa fa-trash"></i>
            </button>
          </td>
        `;
        
        tableBody.appendChild(row);
      });
    }

    // 绑定打卡按钮事件
    function bindCheckInButtons() {
      const checkInButtons = document.querySelectorAll('.hand-drawn-btn');
      checkInButtons.forEach(button => {
        button.addEventListener('click', function() {
          // 显示打卡成功弹窗
          document.getElementById('success-modal').classList.remove('hidden');
          
          // 更新打卡统计
          updateCheckInStats(this);
        });
      });
    }

    // 更新打卡统计
    function updateCheckInStats(button) {
      // 根据按钮的背景色判断打卡类型
      const bgColor = button.classList.contains('bg-primary') ? 'exercise' :
                      button.classList.contains('bg-secondary') ? 'study' :
                      button.classList.contains('bg-tertiary') ? 'food' : 'fun';
      
      // 获取当前统计值
      const countEl = document.getElementById(`${bgColor}-count`);
      const currentCount = countEl.textContent.split('/')[0];
      const newCount = parseInt(currentCount) + 1;
      
      // 更新统计值
      countEl.textContent = `${newCount}/7`;
      
      // 添加动画效果
      countEl.classList.add('animate-bounce-slow');
      setTimeout(() => {
        countEl.classList.remove('animate-bounce-slow');
      }, 1000);
    }

    // 处理文件选择
    function handleFileSelect(event) {
      const file = event.target.files[0];
      if (file) {
        const fileUploadArea = event.target.parentElement;
        const previewContainer = fileUploadArea.querySelector('.preview-container');
        
        if (!previewContainer) {
          // 创建预览容器
          const preview = document.createElement('div');
          preview.className = 'preview-container mt-2 flex flex-wrap gap-2';
          fileUploadArea.parentNode.insertBefore(preview, fileUploadArea.nextSibling);
        }
        
        // 创建预览图片
        const reader = new FileReader();
        reader.onload = function(e) {
          const imgPreview = document.createElement('div');
          imgPreview.className = 'relative hand-drawn-card p-1 bg-gray-100';
          
          const img = document.createElement('img');
          img.src = e.target.result;
          img.className = 'w-16 h-16 object-cover rounded';
          
          const removeBtn = document.createElement('button');
          removeBtn.className = 'absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs';
          removeBtn.innerHTML = '<i class="fa fa-times"></i>';
          removeBtn.onclick = function() {
            imgPreview.remove();
            // 清除文件输入
            event.target.value = '';
          };
          
          imgPreview.appendChild(img);
          imgPreview.appendChild(removeBtn);
          fileUploadArea.parentNode.querySelector('.preview-container').appendChild(imgPreview);
        };
        
        reader.readAsDataURL(file);
      }
    }

    // 切换主题
    function toggleTheme() {
      const body = document.body;
      const themeToggleBtn = document.getElementById('theme-toggle');
      const isDarkMode = body.classList.contains('dark');
      
      if (isDarkMode) {
        // 切换到亮色模式
        body.classList.remove('dark', 'bg-gray-900', 'text-white');
        body.classList.add('bg-light');
        themeToggleBtn.innerHTML = '<i class="fa fa-moon-o" aria-hidden="true"></i>';
      } else {
        // 切换到暗色模式
        body.classList.add('dark', 'bg-gray-900', 'text-white');
        body.classList.remove('bg-light');
        themeToggleBtn.innerHTML = '<i class="fa fa-sun-o" aria-hidden="true"></i>';
      }
    }
  </script>


</body></html>